<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="addDrug"
              v-hasPermi="['system:exam_cost:add']"
              style="margin-left:1280px"
            >添加药品</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="handleUpdate"
          v-hasPermi="['system:exam_cost:edit']"
          style="margin-left: 2px"
        >批量设置</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:exam_cost:remove']"
          style="margin-left: 2px"
        >暂存</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleSure"
          v-hasPermi="['system:exam_cost:remove']"
          style="margin-left: 2px"
        >提交审核</el-button>

      </el-col>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>

          <div class="el-table el-table--enable-row-hover el-table--medium">
            <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
              <el-form-item label="供应商" prop="purOrderId">
                <el-input placeholder="请输入内容" v-model="queryParams.purOrderId" :disabled="true"></el-input>
              </el-form-item>

              <el-form-item label="申请人" prop="createBy">
                <el-input placeholder="请输入内容" v-model="queryParams.createBy" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="供应商" prop="supId">
                <el-select
                  v-model="queryParams.supId"
                  placeholder="供应商"
                  clearable
                  size="small"
                  style="width: 240px"
                >
                  <el-option
                    v-for="dict in supplierList"
                    :key="dict.supId"
                    :label="dict.supName"
                    :value="dict.supId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="制表时间" prop="createTime">
                <el-date-picker
                  v-model="queryParams.createTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  default-time="12:00:00"
                  value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </el-form-item>
              </el-form>
            <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
              <el-form-item label="批发额" prop="purCount">
                <el-input placeholder="请输入内容" v-model="queryParams.purCount" :disabled="true"></el-input>
              </el-form-item>
            </el-form>

          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <div class="el-table el-table--enable-row-hover el-table--medium">
          <el-table  :data="drugList" >
            <el-table-column label="药品ID" align="center" prop="drugId" style="width: 40px" />
            <el-table-column label="药品名称" align="center" prop="drugName"  />
            <el-table-column label="规格" align="center" prop="drugUnit"  />
            <el-table-column label="生产厂家" align="center" prop="factoryName"  />

            <el-table-column label="数量" align="center" prop="purNumbers">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.purNumbers"
                                 @change="handlepurPriceChange()"
                                 :min="1" :max="10000" label="描述文字"
                                 size="mini"
                ></el-input-number>
              </template>
            </el-table-column>

            <el-table-column label="单位" align="center" prop="drugRxPrice">g</el-table-column>

            <el-table-column label="批发价" align="center" prop="purPrice"  >
              <template slot-scope="scope">
                  <el-input-number v-model="scope.row.purPrice"
                                   @change="handlepurPriceChange()"
                                   :min="1" :max="10000" label="描述文字"
                                   :step="0.1"
                                   size="mini"
                  ></el-input-number>
              </template>
            </el-table-column>

            <el-table-column label="批发额" align="center"  >
              <template slot-scope="scope">
              <span v-text="(scope.row.purPrice)*(scope.row.purNumbers)"></span>
              </template>
            </el-table-column>

            <el-table-column label="批次号" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.purId"

                          placeholder="请输入内容"
                          size="mini"
                ></el-input>
              </template>
            </el-table-column>

            <el-table-column label="备注" align="center"  >
              <template slot-scope="scope">
                <el-input v-model="scope.row.remark"
                          @change="handleremarkChange(scope.row)"
                          placeholder="请输入内容"
                          size="mini"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center"  >
              <template slot-scope="scope">
                <el-button type="text" size="small" @click='deleteHandle(scope.$index,scope.row.drugId)'>删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>


    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1300px" append-to-body>
      <el-form :model="drugForm" ref="queryForm" v-show="showSearch" :inline="true">

        <span style="margin-left: 150px">关键字：</span><el-input placeholder="请输入内容" v-model="drugForm.drugKey" @change="getDrugsList" size="mini" style="width: 200px" ></el-input>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span style="margin-left: 20px">药品类型：</span><el-select
            v-model="drugForm.drugType"
            placeholder="药品类型"
            clearable
            size="mini"
            style="width: 240px"
            @change="getDrugsList"
          >
            <el-option
              v-for="dict in drugTypes"
              :key="dict.drugType"
              :label="dict.drugType"
              :value="dict.drugType"
              size="mini"
            />
          </el-select>


          <span style="margin-left: 20px">处方类型：</span>
        <el-select
        v-model="drugForm.drugRxType"
        placeholder="处方类型"
        clearable
        size="mini"
        style="width: 240px"
        @change="getDrugsList"
      >
        <el-option
          v-for="dict in drugTypes"
          :key="dict.drugRxType"
          :label="dict.drugRxType"
          :value="dict.drugRxType"
          size="mini"

        />
      </el-select>
      </el-form>
    <br>
        <el-table  :data="drugsList" @selection-change="handleSelectionChange" border="0px" :row-key="getRowKeys">
          <el-table-column type="selection" width="55" align="center" prop="drugId"  :reserve-selection="true"  :selectable="selectable" />
          <el-table-column label="药品ID" align="center" key="drugId" prop="drugId"  />
          <el-table-column label="药品名称" align="center" key="drugName" prop="drugName" :show-overflow-tooltip="true"  />
          <el-table-column label="药品编码" align="center" key="drugNumber"  prop="drugNumber"  />
          <el-table-column label="生产厂家" align="center" key="factoryName"  prop="factoryName"  />
          <el-table-column label="药品类型" align="center" key="drugType"  prop="drugType"  />
          <el-table-column label="处方类型" align="center" key="drugRxType"  prop="drugRxType"  />
          <el-table-column  label="关键字" align="center" key="drugKey"  prop="drugKey"  ></el-table-column>
        </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="drugForm.pageNum"
        :limit.sync="drugForm.pageSize"
        @pagination="getList"
      />

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="piliangopen" width="500px" append-to-body>
      <el-form :model="piliangshezhi" ref="queryForm" v-show="showSearch" :inline="true" >

        <el-form-item label="数量" prop="num" style="margin-left: 30px">
          <template>
            <el-input-number size="mini" v-model="piliangshezhi.num"></el-input-number>
          </template>
        </el-form-item>
        <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-form-item label="批发价格" prop="price">
          <template>
            <el-input-number v-model="piliangshezhi.price" :precision="2" :step="0.1" :max="1000" size="mini"></el-input-number>
          </template>
        </el-form-item>
        <br>&nbsp;
        <el-form-item label="批次号" prop="purid" style="margin-left: 15px">
          <template>
            <el-input v-model="piliangshezhi.purid" placeholder="请输入批次号" size="mini" style="width: 200px"></el-input>
          </template>
        </el-form-item>
        <br>&nbsp;
        <el-form-item label="备注" prop="remark" style="margin-left: 30px">
          <template>
            <el-input v-model="piliangshezhi.remark" placeholder="请输入备注" size="mini" style="width: 200px"></el-input>
          </template>
        </el-form-item>
      </el-form>
      <br>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitpiliangForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>


</template>

<script>
import { getSuppliers , getPur , getDrug , getDrugTypes ,  getAllDrug , sureDrug , deletePurDrug} from "@/api/purchase/detail";
import { deepClone } from '../../utils'

export default {
  name: "Server",
  data() {
    return {
      // 加载层信息
      loading: [],
      // 服务器信息
      server: [],
      // 显示搜索条件
      showSearch: true,
      // 供应商列表
      supplierList:[],
      //订单对应药品列表
      drugList:[],
      //所有药品列表
      drugsList:[],
      //已显示的药品列表
      showedDrugIds:[],
      // 总条数
      total: 0,
      //弹出层显示
      open: false,
      //批量弹框
      piliangopen:false,

      //药品类型
      drugTypes:[],

      drugs:[],
      single:0,
      //订单数据
      queryParams:{
        createTime:null,
        supId:null,
        purOrderId:null,
        createBy:null,
        purCount:0,
        drugList:[],
        status:0
      },
      table:{

      },
      getRowKeys(row) {
        return row.drugId;
      },
      //添加药品弹框
      drugForm:{
        pageNum: 1,
        pageSize: 10,
        drugKey:null,
        drugType:null,
        drugRxType:null
      },
      pur_drug:{
        drugId:null,
        drugName:null,
        drugUnit:"g",
        factoryName:null,
        purNumbers:1,
        drugRxPrice:1,
        purPrice:1,
        purId :null,
        remark:null
      },
      piliangshezhi:{
        num:null,
        price:null,
        purid:null,
        remark:null
      }
    };
  },
  created() {
    this.getSupplierList();
    const purOrderId = this.$route.params && this.$route.params.purOrderId;
    this.getOnePur(purOrderId);
    this.getAllDrug(purOrderId)
  },
  methods: {
    getSupplierList() {
      this.loading = true;
      getSuppliers().then(
        response => {
          this.supplierList = response.data;

        }
      );
    },
    selectable(row, index) {
      if (row.isSelected) {
        return false; //禁用状态
      } else {
        return true; //非禁用状态
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.drugs = selection.map(item => item)
      this.single = selection.length!=0
    },


      handleDelete(){
      if (this.queryParams.supId == null){
        alert("请选择供应商")
      }else {
        this.queryParams.drugList = this.drugList
        sureDrug(this.queryParams).then(resp=>{
          if (this.queryParams.status==0) {
            alert("暂存成功")
          }else {
            alert("提交审核成功")
          }
        })
      }
    },
    handleSure(){
      if (this.queryParams.supId == null){
        alert("请选择供应商")
      }else {
        this.queryParams.status = 1
        this.handleDelete()
        //this.$router.push({ path:'/purchase'})
      }
    },

    submitForm(){
      for (var i = 0 ; i < this.drugs.length ; i++){
        var deepClone1 = deepClone(this.pur_drug)
        deepClone1 = this.drugs[i]
        deepClone1.purNumbers = 1
        deepClone1.purPrice = 1
        deepClone1.drugUnit = "g"
        var flag = true
        for (var j = 0 ; j < this.drugList.length ; j++) {
          if (this.drugs[i].drugId == this.drugList[j].drugId ){
            flag=false
          }
        }
        if (flag) {
          this.drugList.push(deepClone1)
        }
      }
      this.open = false
      this.drugs = []
    },
    addDrug(){
      this.open = true
      if (this.drugList.length!=0){
        for (var i = 0 ; i < this.drugList.length ; i ++) {
          this.showedDrugIds.push(this.drugList[i].drugId);
        }
      }else {
        this.showedDrugIds.push(-1);
      }
      console.log(this.showedDrugIds)
      getDrugTypes().then(respones=>{
        this.drugTypes = respones.data;
      })
      this.getDrugsList()
      this.showedDrugIds=[]
    },

    getDrugsList(){
      getAllDrug(this.drugForm,this.showedDrugIds).then(respones=>{
        this.drugsList = respones.rows;
      })
    },
    getOnePur(purOrderId) {
      this.loading = true;
      getPur(purOrderId).then(
        response => {
          this.queryParams.purOrderId=response.data.purOrderId;
          this.queryParams.supId=response.data.supId;
          this.queryParams.createTime=response.data.createTime;
          this.queryParams.createBy=response.data.createBy;
          if (response.data.purCount!=null){
          this.queryParams.purCount=response.data.purCount;
          }
        }
      );
    },
    handleUpdate(row){
      this.piliangopen = true
    },
    handlepurPriceChange(){
      var num = 0;
      for (var i = 0 ; i < this.drugList.length ; i ++){
         num += this.drugList[i].purNumbers*this.drugList[i].purPrice
      }
      this.queryParams.purCount=num;
    },
    deleteHandle(index,drugId){
      this.drugList.splice(index, 1);
      deletePurDrug(this.queryParams,drugId).then(resp =>{
        alert("删除成功")
      })
    },
    handleremarkChange(row){

    },


    getAllDrug(purOrderId) {
      this.loading = true;
      getDrug(purOrderId).then(
        response => {
          this.drugList = response.rows;
        }
      );
    },
    /** 查询服务器信息 */
    getList() {
      getServer().then(response => {
        this.server = response.data;
        this.loading.close();
      });
    },
    // 打开加载层
    openLoading() {
      this.loading = this.$loading({
        lock: true,
        text: "拼命读取中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },

    submitpiliangForm() {
      if (this.piliangshezhi.remark == null||this.piliangshezhi.purid == null||this.piliangshezhi.price == null||this.piliangshezhi.num == null){
        alert("请填写完整")
      }else {
        for (var i = 0 ; i < this.drugList.length ; i ++){
          this.drugList[i].purNumbers = this.piliangshezhi.num
          this.drugList[i].purPrice = this.piliangshezhi.price
          this.drugList[i].purId = this.piliangshezhi.purid
          this.drugList[i].remark = this.piliangshezhi.remark
        }
        this.piliangopen = false
      }


    }
  }

};
</script>
